<template>
  <div class="page-error">
    <div class="panel-error-word">
      <h1 class="panel-error-h1 panel-text">出错啦</h1>
      <p class="panel-error-copyright p-b-20">
        版权所有：
        <a href="http://www.easipass.com/cn/index.html" class="panel-text-a" target="_blank">上海亿通国际股份有限公司</a>
      </p>
      <p class="panel-error-more">可能是服务器开了小差，可过会尝试刷新下页面</p>
      <p class="p-t-10">您可以尝试<a @click="logout">退出登录</a></p>
    </div>
    <div class="panel-error-pic">
      <img :src="'./img/401.png'" alt="error" />
    </div>
  </div>
</template>

<script>
import settings from '@/settings'
import { cleanCache } from '@/utils/auth'

export default {
  methods: {
    logout() {
      cleanCache()
    }
  }
}
</script>

<style scoped lang="less">
.page-error {
  position: absolute;
  width: 800px;
  height: 200px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  .text-red {
    color: #d81e06;
  }
  span {
    font-size: 16px;
    font-weight: bold;
  }
  .panel-error-word {
    width: 400px;
    padding-right: 20px;
    h1 {
      color: #052244;
    }
    p {
      color: #666;
      font-size: 14px;
      line-height: 21px;
      margin-bottom: 5px;
      .panel-text-a {
        color: #052244;
        text-decoration: none;
        border-bottom: none;
      }
    }
  }
  .panel-error-pic {
    position: absolute;
    top: 30px;
    right: 0;
    img {
      height: 200px;
    }
  }
  p {
    font-size: 14px;
    a {
      color: #2296f3;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid #2296f3;
      margin-left: 10px;
    }
  }
}
</style>
